<template>
	<view class="article">
		<view class="title">{{article.title}}</view>
		<view class="body" v-for="(item,index) in article.body" :key="index">
			<view class="image" v-if="item.type == 'image' " @tap="prevImage(item.data)">
				<image :src="item.data" mode="aspectFill"></image>
			</view>
			<view class="content" v-if="item.type  == 'content'">
				<view class="data">
					{{item.data}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import api from '../../../common/api.js'
	export default {
		data() {
			return {
				id:'',
				article:{}
			}
		},
		async onLoad(p) {
			console.log(p);
			this.id = p.id
			this.article = await api.GetArticleDetail(this.id)
			console.log(this.article);
		},
		methods:{
			prevImage(image) {//预览图片
				console.log(image);
				uni.previewImage({
					urls:[image]
				})
			}
		}
	}
</script>

<style lang="scss">
page {
	background-color: #efefef;
}
.article {
	padding: 20rpx 30rpx;
}
.title {
	padding: 40rpx;
	font-weight: 600;
	margin: 0 auto;
	width: 550rpx;
	text-align: center;
}
.image {
	width: 680rpx;
	height: 300rpx;
	padding: 20rpx 0;
	image {
		width: 100%;
		height: 100%;
	}
}
.content {
	text-indent: 32rpx;
}
.bottom {
	display: flex;
	position: fixed;
	bottom: 0;
	justify-content: space-evenly;
	align-items: center;
	width: 100%;
	height: 120rpx;
	color: #3d3d3d;
	background-color: #efefef;
	.left,.center,.right {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 220rpx;
		height: 90rpx;
		border-radius: 10rpx;
		background-color: #efefef;
		border: 1rpx solid #cccbc6;
		color: #3d3d3d;
		image {
			width: 22rpx;
			height: 25rpx;
			margin-right: 10rpx;
		}
	}
	.right {
		image {
			margin-left: 10rpx;
		}
	}
}
</style>
